프로젝트 소개
그동안 계속 미뤘던 블로그 제작을 이제야 진행한다. 개발을 시작하면서부터 블로그를 운영하라는 이야기를 여러 번 들었지만, 원하는 것도 많고 기준이 높았던 탓에 블로그 개발을 자꾸 미뤄왔다. 사실 기존 블로그 플랫폼을 사용하는 것이 시간도 절약되고 편리하겠지만 왠지 모르게 내 손으로 직접 만든 블로그를 갖고 싶었다. 벌써 두 번이나 블로그를 만들었다가 세 번
Series: 블로그 제작
Repository와 Next.js 프로젝트 생성
GitHub Repository 생성 GitHub Pages는 public repository에서 사용할 수 있다. 블로그 주소는 username.github.io 이다. username은 본인의 아이디이다. 리포지토리 이름을 username.github.io로 지으면 해당 리포지토리는 username.github.io 주소로 접속할 수 있다. 그 외의 이
Contentlayer로 마크다운 파일 읽기
Contentlayer란 Contentlayer는 콘텐츠를 JSON으로 변환해서 쉽게 사용할 수 있게 해주는 도구이다. 프로젝트 폴더에 있는 마크다운 파일을 Next.js에서 사용하기 위해 도입했다. Sources 정식으로 지원하는 소스는 Sources > Files">파일이다. (2023년 11월 기준) [원격 파일][contentlayer-remot
다크 모드와 라이트 모드 추가하기(next-themes + tailwindcss)
next-themes next-themes는 Next.js에서 다크 모드를 쉽게 사용할 수 있도록 해 준다. next-themes에서 소개하는 특징 중 아래 내용이 마음에 들어서 선택했다. 단 두 줄의 코드로 다크 모드 완성 Next.js app 디렉토리 지원 시스템 설정 사용 가능 next-themes 설치 npm install next-themes
마크다운에 깃허브 스타일 적용하기
github-markdown-css 이전에는 직접 마크다운 스타일도 만들어봤지만 너무 귀찮고, 익숙한 깃허브 스타일을 사용해보고 싶어서 검색해봤다. github-markdown-css를 바로 찾을 수 있었다. 사용법은 간단하다. CSS 파일(github-markdown.css 등)을 import 하고, 마크다운을 감싸고 있는 컨테이너 태그에 markdown
Contentlayer에서 highlight.js로 코드블럭 하이라이트
마크다운에 깃허브 스타일을 적용했지만, 코드블럭은 하이라이트되지 않는다. Contentlayer에서는 플러그인 설치와 설정만 하면 쉽게 코드를 하이라이트 할 수 있다. Contentlayer 공식 문서에서 rehype-highlight를 사용했기 때문에 그대로 따라했다. Contentlayer 마크다운 하이라이트 예시 rehype-highlight 설치 r
html로 변환한 마크다운에서 정규표현식으로 html 태그 제거
문제 Contentlayer의 예제를 따라하면 글 목록에 글 본문 전체가 출력된다. app/page.tsx의 <PostCard> 컴포넌트에 글 본문 전체를 넣도록 되어 있다. <div>에 dangerouslySetInnerHTML로 post.body.html을 통째로 전달한다. function PostCard(post: Post) { return (
스크롤바 항상 보이게 하기
길이가 짧은 페이지에는 스크롤바가 없고, 길이가 길어지면 스크롤바가 생기니 페이지를 이동할 때마다 화면이 좌우로 조금씩 왔다갔다 했다. 그래서 항상 스크롤바를 띄우기로 했다. <html> 태그에 overflow-y: scroll 속성을 추가한다. tailwind css <html className="overflow-y-scroll" /> CSS html {
tailwind css에서 리스트 항목(<li>)에 숫자나 기호 표시하기
tailwind css에서 리스트를 사용하면 앞에 목록 기호가 나타나지 않는다. <ul>과 <ol> 둘 다 그렇다. globals.css에서 아래 코드를 추가하면 원래대로 돌아온다. @tailwind base; @tailwind components; @tailwind utilities; @layer base { ul, ol { list-st